<template>
  <div>
    <h1>动态组件</h1>
    <hr />
    <ul class="menu">
      <li @click="comName = 'Dynamic0'">Dynamic1</li>
      <li @click="comName = 'Dynamic2'">Dynamic2</li>
    </ul>
    <hr />
    <!-- 动态切换组件 -->
    <keep-alive include="Dynamic1,Dynamic2"
      ><component :is="comName"></component
    ></keep-alive>
  </div>
</template>

<script>
/**
 * 动态组件用法：<component :is="comName"></component>
 * 说明：component是vue框架的内置全局组件
 * 注意：:is='变量(要显示的组件的标签名)'
 * 特点：每次切换时，都会把上次显示的组件销毁->然后创建并显示当前组件->没有组件缓存->在开发时，考虑性能需要缓存动态切换的组件
 * 技术：keep-alive vue框架的内置全局组件->作用：缓存动态切换的组件(缓存到内存中)
 * 用法：使用keep-alive包裹动态组件
 * 怎么控制缓存范围？
 * 使用keep-alive的include属性="组件的name值1,组件的name值2"
 *
 * activated和deactivated的作用：组件的created只会执行一次，如果想在再次切换后执行某些功能，就需要activated和deactivated
 * 注意：组件被缓存了，才能执行activated和deactivated这两个钩子函数，activated在创建组件的时候会执行一次，deactivated会在第一次离开该组件执行一次
 */
import Dynamic1 from "./components/dynamic1.vue";
import Dynamic2 from "./components/dynamic2.vue";
export default {
  // name相当于组件的id，唯一值，且不能和html已知元素名相同
  name: "App",
  components: {
    // key(标签名): value(动态组件)
    Dynamic0: Dynamic1,
    Dynamic2,
  },
  data() {
    return {
      comName: "",
    };
  },
};
</script>

<style lang="less" scoped>
.menu {
  display: flex;
  li {
    margin: 15px;
  }
}
</style>